<template>
	<view class="calendar-top">
		<view class="calendar-top-box">
			<view class="swiper-calendar-wrp">
				<scroll-view class="calendar-wrp" id="the-id" :scroll-into-view="scrollViewId" lower-threshold="50" :scroll-left="scrollLeft"
				 scroll-with-animation="true" scroll-x="true" upper-threshold="50">
					<view @click="selmeal(index)" :id="'cal'+index" :class="'calendar-wrp-item '+[selIndex==index?'calendar-active ':'']"
					 v-for="(item,index) in mealList" :key="index">
						<view class="item-wrp">				
							<view class="tc fw-bold">套餐{{index + 1}}</view>
							<view class="date line2">{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>

</template>

<script>
	import util from '@/utils/util.js';
	var _getDiffDate = util.getDiffDate;
	var _addDay = util.addDay;
	var _dateDiff = util.dateDiff;
	var _parseDate = util.parseDate;
	var _formatDate = util.formatDate
	export default {
		props: {
			mealList: {
				type: Array,
		        default: []
			},
			selectMealIndex:{
				type: Number,
		        default: 0
			},

		},
		data() {
			return {
				scrollLeft: 0,
				swiperItemWidth: 65,
				scrollViewId: '',
				selIndex: 0,
			};
		},
		watch: {
		 selectMealIndex:{
		 	handler(nVal,oVal){
		 		if(nVal){
					this.selIndex = nVal;
				}
		 	},
		 	immediate: true,
		 	deep:true
		 }
		},
		mounted() {
			// this.swiperCalendarDates();
		},
		methods: {
			selmeal(index){
				this.selIndex = index;
				this.$emit("chnageMealIndex", {
					mealIndex: index
				});
			}
		}
	}
</script>


<style>
/* 	page {
		background-color: #ddd;
	} */

	.calendar-top {
		padding: 10rpx;
		background: #FFFFFF;
	}

	.calendar-top-box {
		display: flex;
		/* overflow: hidden; */
		border-radius: 5px;
	}

	.swiper-calendar-wrp {
		flex: 1;
		overflow: hidden;
		background: #FFFFFF;
		position: relative;
	}

	.swiper-calendar-wrp::before {
		/* content: " ";
		position: absolute;
		left: -2rpx;
		top: 0;
		height: 100rpx;
		width: 1rpx;
		background: #0c79ff; */
		/* box-shadow: 10rpx 0rpx 25rpx 10rpx #2e79df; */
	}

	.swiper-calendar-wrp::after {
		/* content: " ";
		position: absolute;
		right: -2rpx;
		top: 0;
		height: 100rpx;
		width: 1rpx;
		background: #0c79ff; */
		/* box-shadow: -2rpx 0rpx 30rpx 5rpx #0c79ff; */
	}

	.calendar-link {
		width: 96rpx;
		height: 150rpx;
		font-size: 24rpx;
		background: #FFFFFF;
		color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		/* padding: 15rpx 0; */
		/* flex-direction: column; */
		box-sizing: border-box;
	}
	.calendar-link::before {
		background: linear-gradient(90deg, hsla(0, 0%, 89%, 0), #cdd1de 99%);
		content: "";
		height: 150rpx;
		/* margin-top: 8px; */
		opacity: .6;
		position: absolute;
		right: 128rpx;
		width: 5px;
	}


	.calendar-link-arrow {
		width: 20rpx;
		height: 10rpx;
		margin-top: 5rpx;
	}

	.calendar-wrp {
		height: 110rpx;
		white-space: nowrap;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.calendar-wrp-item {
		max-width: 350rpx;
		/* height: 100rpx; */
		font-size: 24rpx;
		display: inline-block;
		text-align: center;
		position: relative;
		color: #000000;
		margin-right: 8px;
	}

	/* .calendar-wrp-item::after {
    content: " ";
    height: 80rpx;
    width: 0.5px;
    border-right: 1rpx #e5e5e5 solid;
    position: absolute;
    right: -1rpx;
    top: 8rpx;
} */

	.calendar-wrp-item:last-child::after {
		display: none;
	}

	.item-wrp {
		display: flex;
		height: 100%;
		flex-direction: column;
		box-sizing: border-box;
		color: rgb(51, 51, 51);
		border-radius: 8rpx;
		border-style: solid;
		border-width: 0.05rem;
		border-color: rgb(238, 241, 246);
		background-color: rgb(246, 248, 250);
		padding: 5px 10px;
		align-items: start;
	}
	.price {
		white-space: nowrap;
		font-size: 15px;
		max-width: 70px;
		position: relative;
		padding: 5px 0;
		color: #f50; 
		font-family: "20th_bold";
		font-weight: 700;
	}

	.calendar-wrp-item .date {
		padding-top: 5px;
		font-size: 15px;
		color: #111;
		font-family: "20th_bold";
		font-weight: 700;
	}

	.calendar-wrp-item .week {
		padding-top: 5rpx;
		font-size: 28rpx;
		color: #111;
	}

	.calendar-active .item-wrp {
		/* background: #007AFF; */
		/* background-image: linear-gradient(to right, #0c8eff, #007AFF); */
		border-style: solid;
		border-width: 1px;
	    border-color: var(--view-theme);
		background-color: rgb(242, 248, 254);
		/* color: #FFFFFF; */
		border-radius: 8rpx;
	}

	.calendar-active::after {
		display: none;
	}

	.calendar-disabled .item-wrp {
		background: rgba(255, 255, 255, 0.5);
		border-radius: 8rpx;
		color: #dadde0;
	}

	.line-type__hover {
		border-color: #186ee7;
		background: #f5f5f5;
	}

	.calendar-chartered-top {
		background-color: #fff;
		padding: 0;
	}

	.calendar-chartered-top .swiper-calendar-wrp {
		background-color: #fff;
	}

	.calendar-chartered-top .item-wrp {
		color: #333333;
	}

	.calendar-chartered-top .calendar-wrp-item::after {
		border-right: 1rpx #DEE4E7 solid;
	}

	.calendar-chartered-top .calendar-link {
		color: #333333;
		background-color: #fff;
		padding: 10rpx 0;
	}

	.calendar-chartered-top .swiper-calendar-wrp::before {
		box-shadow: 10rpx 0rpx 25rpx 10rpx #DEE4E7;
		background-color: #DEE4E7;
	}

	.calendar-chartered-top .swiper-calendar-wrp::after {
		box-shadow: 2rpx 0rpx 30rpx 10rpx #DEE4E7;
		background-color: #DEE4E7;
	}

	.calendar-chartered-top .calendar-active .item-wrp {
		background: #5F9DF1;
		color: #fff;
	}

	.calendar-chartered-top .calendar-wrp-item .date,
	.calendar-chartered-top .calendar-wrp-item .week {
		font-size: 26rpx;
	}

	.animate {
		z-index: 9999;
		animation: mymove 1s linear;
		animation-delay: 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	@keyframes mymove {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@-webkit-keyframes mymove {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>
